<template>
  <a-spin :spinning="loading">
    <div class="px-20 py-10 bg-white">
      <a-tabs :animated="false" v-model="priceKey" @change="storeInfo">
        <a-tab-pane key="dayPrice" tab="日常价格">
          <a-form class="inline-form">
            <a-row type="flex" :gutter="16">
              <a-col :span="6">
                <a-form-item label="周一租车：">
                  {{ priceData.mondayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周二租车：">
                  {{ priceData.tuesdayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周三租车：">
                  {{ priceData.wednesdayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周四租车：">
                  {{ priceData.thursdayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周五租车：">
                  {{ priceData.fridayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周六租车：">
                  {{ priceData.saturdayPrice }}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="周日租车：">
                  {{ priceData.sundayPrice }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row type="flex" :gutter="16">
              <a-col :span="8">
                <a-form-item label="租车押金：">
                  {{ priceData.vehicleDeposit }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="违章押金：">
                  {{ priceData.legalDeposit }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="免押类型：">
                  {{ priceData.creditSupport ? '支持信用免押' : '不支持信用免押' }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="最大里程："> {{ priceData.maxMileage }}km </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="超出里程付费金额(每公里)："> {{ priceData.exceedMileageAmount }}元 </a-form-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-item label="租期限制：">
                  {{ priceData.rentDayUpperLimit }}至 {{ priceData.rentDayLowerLimit }}天
                </a-form-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-item label="最短租期：">
                  <template v-if="priceData.rentDayLowerLimit>0">{{ priceData.rentDayLowerLimit }}天</template>
                  <template v-else>不限</template>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="基础服务费："> {{ priceData.basicServiceFee }}元 </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车行手续费："> {{ priceData.handlingFee }}元 </a-form-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-item label="儿童座椅费用(按天)："> {{ priceData.childSeatFee }}元 </a-form-item>
              </a-col> -->
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="specialPrice" tab="特殊时间价格">
          <div class="p-4">
            <a-table
              class="table-con"
              row-key="id"
              :columns="columns"
              :data-source="specialdata"
              :pagination="pagination"
            >
              <template #isEnabled="isEnabled, data">
                <a-switch :disabled="true" :checked="isEnabled" y />
              </template>
              <template #timingName="val, specialdata">
                <section class="text-center">
                  <section class="text-14 fw">{{ specialdata.timingName }}</section>
                  <section class="text-14">{{ specialdata.fromTime }}至{{ specialdata.toTime }}</section>
                </section>
              </template>
              <template #rental="val, specialdata">
                <section class="text-center">
                  <section class="text-14">
                    每日价格（元）：{{ specialdata.rentPrice }} <span class="ml-5 mr-5">|</span> 最短租期：
<!--                    {{specialdata.rentDayUpperLimit }}- -->
                    {{ specialdata.rentDayLowerLimit }}天
                    <span class="ml-5 mr-5">|</span>
                    里程限制：{{specialdata.maxMileage}}km
                  </section>
                </section>
              </template>
              <template #storeId="val, data">
                <section class="text-center">
                  <section class="text-14">
                    {{ storeName }}
                  </section>
                </section>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="addedPrice" tab="增值服务价格">
          <div class="p-4">
            <a-table
              class="table-con"
              row-key="id"
              :columns="addedcolumns"
              :data-source="addeddata"
              :pagination="pagination"
            >
              <template #isEnabled="isEnabled, data">
                <a-switch :disabled="true" :checked="isEnabled" />
              </template>
              <template #serviceCode="val, data">
                <section class="text-center">
                  <section class="text-14">{{ data.serviceCode }}</section>
                </section>
              </template>
              <template #unitPrice="val, data">
                <section class="text-center">
                  <section class="text-14" v-if="data.unitPrice == 0">免费</section>
                  <section class="text-14" v-if="data.unitPrice !== 0">
                    收费，{{ data.unitPrice }}/{{ data.feeUnit == 1 ? '个' : data.feeUnit == 2 ? '天' : '次' }}
                  </section>
                </section>
              </template>
              <template #storeId="val, data">
                <section class="text-center">
                  <section class="text-14">
                    {{ storeName }}
                  </section>
                </section>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
        <div slot="tabBarExtraContent">
          <a-select @change="search" class="w1" v-model="channelId" placeholder="请选择来源渠道">
            <a-select-option v-for="item in channelList" :value="item.id" :key="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </div>
      </a-tabs>
      <!-- <div class="w3">123</div> -->
    </div>
  </a-spin>
</template>

<script>
import { getVehiclePrice } from '@/api/store/index'
import { getAllStores } from '@/api/store'
import { tableMixins } from '@/utils/mixins'

export default {
  mixins: [tableMixins],
  components: {},
  props: {
    storeId: {
      type: Number,
    },
    PricevehicleTypeId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      loading: false, // 是否在加载中
      priceKey: 'dayPrice',
      channelList: [],
      channelId: undefined,
      priceData: [],
      specialdata: [],
      columns: [
        { title: '时间段', dataIndex: 'timingName', align: 'center', scopedSlots: { customRender: 'timingName' } },
        { title: '租金情况', dataIndex: 'rental', align: 'center', scopedSlots: { customRender: 'rental' } },
        { title: '门店', dataIndex: 'storeId', align: 'center', scopedSlots: { customRender: 'storeId' } },
        { title: '是否启用', align: 'center', dataIndex: 'isEnabled', scopedSlots: { customRender: 'isEnabled' } },
      ],
      addeddata: [],
      addedcolumns: [
        {
          title: '增值服务名称',
          dataIndex: 'serviceName',
          align: 'center',
          scopedSlots: { customRender: 'serviceName' },
        },
        { title: '收费情况', dataIndex: 'unitPrice', align: 'center', scopedSlots: { customRender: 'unitPrice' } },
        { title: '门店', dataIndex: 'storeId', align: 'center', scopedSlots: { customRender: 'storeId' } },
        { title: '是否启用', align: 'center', dataIndex: 'isEnabled', scopedSlots: { customRender: 'isEnabled' } },
      ],
      storeList: [], // 门店列表
    }
  },
  computed: {
    storeName() {
      return (
        this.storeList &&
        this.storeList.find((x) => x.id == this.storeId) &&
        this.storeList.find((x) => x.id == this.storeId).name
      )
    },
  },
  watch: {},
  async created() {
    await this._getChannelList()
    await this.getVehiclePriceList()
    await this._getCurUserStores()
  },
  mounted() {},
  destroyed() {},
  methods: {
    _getChannelList() {
      // 获取渠道数据
      this.$utils.getChannel().then((data) => {
        console.log(data)
        // 过滤isEnabled为false的渠道
        data = data.filter((x) => x.isEnabled)
        const arr = []
        data.forEach(item => item.code === 'CheMa' ? arr.unshift(item) : arr.push(item))
        console.log(arr)
        this.channelList = arr
        this.channelId = this.channelList[0].id
        console.log(this.vehicleId)
        this.getVehiclePriceList()
      })
    },
    // 获取车辆价格
    getVehiclePriceList() {
      getVehiclePrice({
        storeId: this.storeId,
        vehicleTypeId: this.PricevehicleTypeId,
        channelId: this.channelId,
      }).then((data) => {
        console.log(data)
        this.priceData = data
        this.specialdata = data.timingPrices
        this.addeddata = data.addedServicePrices
      })
    },
    _getCurUserStores() {
      // 获取当前用户拥有门店数据
      return new Promise((resolve, reject) => {
        getAllStores().then((res) => {
          this.storeList = res
          resolve()
        })
      })
    },
    search(e) {
      console.log(e)
      this.channelId = e
      this.getVehiclePriceList()
    },
  },
}
</script>
<style scoped lang='less'>
.w1 {
  width: 180px;
}
.fw {
  font-weight: 800;
}
</style>
